<template>
  <div class="login_container">
    <div class="center">
      <div class="set_title">
        <h2 class="title">电脑商城后台系统</h2>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model.trim="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model.trim="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%;" @click="loginUp()">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'LoginUp',
  data () {
    return {
      form: {
        username: 'oldsix',
        password: '123465'
      },
      rules: {
        username: [
          { required: true, message: '用户名不可为空', trigger: 'blur' },
          { min: 3, max: 8, message: '请输入3~8位用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不可为空', trigger: 'blur' },
          { min: 4, max: 8, message: '请输入4~8位密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapActions('Login', ['LOGIN_UP']),
    loginUp () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // const res = this.login(this.form)
          // window.localStorage.setItem('System_TOKEN', JSON.stringify(this.form))
          this.LOGIN_UP(this.form)
          // console.log(res)
          // if (res.code == 200) {
          //   this.$message.success('登录成功')
          this.$router.push('/')
          // }
        } else {
          this.$message.warning('用户名或密码错误！')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  width: 100%;
  height: 100%;
  background-color: #445566;
  overflow: hidden;

  .center {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .set_title {
      filter: contrast(100);

      .title {
        color: #fff;
        font-size: 33px;
        font-weight: 700;
        text-align: center;
        margin-left: 55px;
        margin-bottom: 40px;
        letter-spacing: 10px;
        animation: show 2s forwards;
      }
    }

    @keyframes show {
      from {
        letter-spacing: -33px;
        filter: blur(5px);
      }

      to {
        letter-spacing: 10px;
        filter: blur(0px);
      }
    }
  }
}
</style>
